<template>
  <div class="author-about">
    <div class="author">
      <avatar :avatar="articleDetail.avatar"/>
      <div class="des">
        <p class="name">
          <span class="username">{{ articleDetail.username }}</span>
          <level :level="articleDetail.level"/>
        </p>
        <p class="introduction">{{ articleDetail.job }}</p>
      </div>
    </div>
    <div class="stat">
      <div class="item">
        <div class="icon-container">
          <svg t="1635928696537" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
               p-id="3551" width="20" height="20">
            <path
                d="M341.220352 910.11072V398.246912c17.26976-6.244352 29.75232-11.569152 37.44768-15.9744 21.505024-12.312576 39.745536-29.079552 54.720512-50.300928 22.723584-32.201728 26.955776-47.039488 51.61984-137.167872 1.619968-5.922816 4.880384-14.014464 9.7792-24.274944 22.669312-37.996544 54.940672-56.951808 96.813056-56.864768 40.452096 0 72.810496 18.95424 97.0752 56.864768 6.047744 10.46528 10.329088 22.153216 12.843008 35.06688 2.514944 12.91264 2.514944 27.74016 0 44.48256l-44.780544 156.270592c-0.792576 2.480128-0.792576 4.291584 0 5.436416 0.854016 1.232896 2.100224 1.849344 3.739648 1.849344h136.04352l-0.150528 0.316416h17.739776c52.799488 0 96 41.6 96 94.399488 0 8.000512-1.600512 16-3.2 24.000512l-47.879168 305.759232c-9.6 41.6-48 72.000512-92.8 72.000512h-425.0112z m-56.889344 0H170.553344c-31.419392 0-56.889344-25.469952-56.889344-56.889344v-398.22336c0-31.418368 25.469952-56.88832 56.889344-56.88832h113.777664V910.11072z"
                p-id="3552"></path>
          </svg>
        </div>
        <p>获得点赞 {{ articleDetail.likeSum }}</p>
      </div>
      <div class="item">
        <div class="icon-container">
          <svg t="1636013786691" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
               p-id="6368" width="20" height="20">
            <path
                d="M1017.181091 449.093818c-7.68-14.219636-192.162909-347.787636-506.205091-347.787636-282.577455 0-457.355636 269.312-495.941818 335.243636-14.219636 18.990545-16.570182 32.651636-7.400727 49.826909C15.197091 500.573091 209.454545 834.862545 512 834.862545v-0.046545c23.272727 0 37.771636-1.652364 58.484364-4.561455 258.327273-31.860364 413.882182-284.136727 443.531636-335.406545 2.048-2.141091 2.513455-4.468364 4.026182-7.121455 6.842182-11.822545 5.632-26.484364-0.861091-38.632727z m-504.994909 220.392727c-107.333818-0.116364-194.746182-90.647273-194.862546-201.774545 0.116364-111.104 87.528727-201.634909 194.862546-201.751273 107.310545 0.116364 194.699636 90.647273 194.839273 201.751273-0.139636 111.150545-87.552 201.681455-194.839273 201.774545z"
                p-id="6369"></path>
          </svg>
        </div>
        <p>文章被阅读 {{ articleDetail.scanSum }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import Level from "@/components/level";
import Avatar from "@/components/avatar";

export default {
  name: "author-about",
  components: {Avatar, Level},
  props: {
    articleDetail: Object
  }
}
</script>

<style lang="less" scoped>
.author-about {
  padding: 10px;

  .author {
    .flex-center();

    img {
      .size(50px);
      border-radius: 50%;
      margin-right: 10px;
      flex-shrink: 0;
    }

    .des {
      .name {
        font-size: 16px;
        margin-bottom: 4px;
        .flex-center();

        .username {
          max-width: 140px;
          .text-ellipse();
          margin-right: 10px;
        }
      }

      .introduction {
        width: 180px;
        .text-ellipse();
        font-size: 13px;
        color: #909090;
      }
    }
  }

  .stat{
    .item{
      margin-top: 16px;
      .flex-center();
      .icon-container{
        background-color: #e1efff;
        .size(28px);
        border-radius: 50%;
        .flex-center(center);
        margin-right: 10px;
        .icon {
          fill: #7bb9ff;
        }
      }
    }
    .item:last-child{
      margin-top: 10px;
    }
  }
}

</style>